<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <div class="bg-white p-6 rounded-lg shadow-sm">
      <!-- 基本信息区域 -->
      <div class="mb-6">
        <h2 class="text-lg font-medium mb-4 text-[var(--color-text-1)] flex items-center">
          <icon-user class="mr-2"/>
          基本信息
        </h2>
        <a-descriptions
            :column="3"
            :data="basicInfoData"
            bordered
            layout="inline-horizontal"
            size="large"
        />
      </div>

      <!-- 证件信息区域 -->
      <div class="mb-6">
        <h2 class="text-lg font-medium mb-4 text-[var(--color-text-1)] flex items-center">
          <icon-file class="mr-2"/>
          证件信息
        </h2>

        <!-- 图片展示区域 -->
        <a-row :gutter="16">
          <!-- 营业执照 -->
          <a-col :span="8" class="mb-4">
            <a-card title="营业执照">
              <template #extra>
                <div class="flex items-center">
                  <a-button
                      v-if="townAccountInfo.townBusinessLicense"
                      type="text"
                      @click="townBusinessLicenseVisiable = true"
                  >
                    <icon-eye/>
                  </a-button>
                  <a-button
                      v-if="townAccountInfo.townBusinessLicense"
                      type="text"
                      @click="onDownLoad(townAccountInfo.townBusinessLicense)"
                  >
                    <icon-download/>
                  </a-button>
                </div>
              </template>
              <div class="image-container">
                <a-image
                    v-if="townAccountInfo.townBusinessLicense && townAccountInfo.townBusinessLicenseUrl"
                    :preview-visible="townBusinessLicenseVisiable"
                    :src="townAccountInfo.townBusinessLicenseUrl"
                    width="100%"
                    @preview-visible-change="townBusinessLicenseVisiable = $event"
                />
                <div v-else class="empty-image-placeholder">
                  <icon-file-image class="text-gray-300 text-2xl"/>
                  <span class="text-gray-400 text-xs mt-2">暂无图片</span>
                </div>
              </div>
            </a-card>
          </a-col>

          <!-- 组织机构代码证 -->
          <a-col :span="8" class="mb-4">
            <a-card title="组织机构代码证">
              <template #extra>
                <div class="flex items-center">
                  <a-button
                      v-if="townAccountInfo.townCodeFile"
                      type="text"
                      @click="townCodeVisiable = true"
                  >
                    <icon-eye/>
                  </a-button>
                  <a-button
                      v-if="townAccountInfo.townCodeFile"
                      type="text"
                      @click="onDownLoad(townAccountInfo.townCodeFile)"
                  >
                    <icon-download/>
                  </a-button>
                </div>
              </template>
              <div class="image-container">
                <a-image
                    v-if="townAccountInfo.townCodeFile && townAccountInfo.townCodeFileUrl"
                    :preview-visible="townCodeVisiable"
                    :src="townAccountInfo.townCodeFileUrl"
                    width="100%"
                    @preview-visible-change="townCodeVisiable = $event"
                />
                <div v-else class="empty-image-placeholder">
                  <icon-file-image class="text-gray-300 text-2xl"/>
                  <span class="text-gray-400 text-xs mt-2">暂无图片</span>
                </div>
              </div>
            </a-card>
          </a-col>

          <!-- 授权委托书 -->
          <a-col :span="8" class="mb-4">
            <a-card title="授权委托书">
              <template #extra>
                <div class="flex items-center">
                  <a-button
                      v-if="townAccountInfo.townAttorney"
                      type="text"
                      @click="townAttorneyVisiable = true"
                  >
                    <icon-eye/>
                  </a-button>
                  <a-button
                      v-if="townAccountInfo.townAttorney"
                      type="text"
                      @click="onDownLoad(townAccountInfo.townAttorney)"
                  >
                    <icon-download/>
                  </a-button>
                </div>
              </template>
              <div class="image-container">
                <a-image
                    v-if="townAccountInfo.townAttorney && townAccountInfo.townAttorneyUrl"
                    :preview-visible="townAttorneyVisiable"
                    :src="townAccountInfo.townAttorneyUrl"
                    width="100%"
                    @preview-visible-change="townAttorneyVisiable = $event"
                />
                <div v-else class="empty-image-placeholder">
                  <icon-file-image class="text-gray-300 text-2xl"/>
                  <span class="text-gray-400 text-xs mt-2">暂无图片</span>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 操作记录区域 -->
      <div class="mb-6">
        <h2 class="text-lg font-medium mb-4 text-[var(--color-text-1)] flex items-center">
          <icon-history class="mr-2"/>
          操作记录
        </h2>
        <a-table
            :columns="operationColumns"
            :data="operationData"
            :pagination="false"
            :scroll="{y: 300}"
            size="small"
        >
          <template #operationType="{record}">
            <a-tag
                :color="getOperationTypeColor(record.operationType)"
                size="small"
            >
              {{ getOperationTypeText(record.operationType) }}
            </a-tag>
          </template>
          <template #operationTime="{record}">
            {{ proxy.$formatDate(record.operationTime) }}
          </template>
        </a-table>
      </div>

      <!-- 操作按钮区域 -->
      <div class="flex justify-end mt-8">
        <a-space>
          <a-button class="px-6" @click="cancelBtnClick()">关闭</a-button>
          <a-button
              v-if="townAccountInfo.status === 1"
              class="px-6"
              status="warning"
              @click="disableBtnClick()"
          >
            禁用
          </a-button>
          <a-button
              v-if="townAccountInfo.status === 0"
              class="px-6"
              status="success"
              @click="enableBtnClick()"
          >
            启用
          </a-button>
          <a-button class="px-6" type="primary" @click="editBtnClick()">
            编辑
          </a-button>
        </a-space>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import {computed, getCurrentInstance, reactive, ref, watch} from "vue";

//全局实例
const {proxy} = getCurrentInstance();
//加载字典
const dicts = proxy.LoadDicts([proxy.DICT.commonNumberStatus]);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {
    },
  },
});
//父组件函数
const emits = defineEmits(["ok", "cancel", "edit"]);
//加载中...
const spinLoading = ref(false);
//图片预览状态
const townBusinessLicenseVisiable = ref(false);
const townCodeVisiable = ref(false);
const townAttorneyVisiable = ref(false);

// 模拟数据
const mockTownData = {
  "1": {
    townAccountId: "1",
    townName: "安海镇",
    townPerson: "张三",
    townMobile: "13800138001",
    townCode: "350582101",
    townAddress: "福建省泉州市晋江市安海镇",
    status: 1,
    townBusinessLicense: "file_001",
    townBusinessLicenseUrl: "https://via.placeholder.com/300x200?text=营业执照",
    townCodeFile: "file_002",
    townCodeFileUrl: "https://via.placeholder.com/300x200?text=组织机构代码证",
    townAttorney: "file_003",
    townAttorneyUrl: "https://via.placeholder.com/300x200?text=授权委托书",
    createTime: "2024-01-15 10:30:00",
    updateTime: "2024-01-20 14:20:00"
  },
  "2": {
    townAccountId: "2",
    townName: "磁灶镇",
    townPerson: "李四",
    townMobile: "13800138002",
    townCode: "350582102",
    townAddress: "福建省泉州市晋江市磁灶镇",
    status: 1,
    townBusinessLicense: "file_004",
    townBusinessLicenseUrl: "https://via.placeholder.com/300x200?text=营业执照",
    townCodeFile: "file_005",
    townCodeFileUrl: "https://via.placeholder.com/300x200?text=组织机构代码证",
    townAttorney: "file_006",
    townAttorneyUrl: "https://via.placeholder.com/300x200?text=授权委托书",
    createTime: "2024-01-10 09:15:00",
    updateTime: "2024-01-18 16:45:00"
  }
};

// 模拟操作记录数据
const mockOperationData = [
  {
    operationId: "1",
    operationType: "create",
    operationUser: "系统管理员",
    operationTime: "2024-01-15 10:30:00",
    operationDesc: "创建镇街账号",
    operationIp: "192.168.1.100"
  },
  {
    operationId: "2",
    operationType: "update",
    operationUser: "系统管理员",
    operationTime: "2024-01-20 14:20:00",
    operationDesc: "修改镇街信息",
    operationIp: "192.168.1.101"
  },
  {
    operationId: "3",
    operationType: "login",
    operationUser: "张三",
    operationTime: "2024-01-22 08:45:00",
    operationDesc: "用户登录",
    operationIp: "192.168.1.102"
  }
];

//镇街账号信息
const townAccountInfo = reactive({
  //镇街账号ID
  townAccountId: null,
  //镇街名称
  townName: null,
  //镇街联系人
  townPerson: null,
  //镇街联系方式
  townMobile: null,
  //镇街代码
  townCode: null,
  //镇街地址
  townAddress: null,
  //营业执照
  townBusinessLicense: null,
  townBusinessLicenseUrl: null,
  //组织机构代码证文件
  townCodeFile: null,
  townCodeFileUrl: null,
  //授权委托书
  townAttorney: null,
  townAttorneyUrl: null,
  //状态 0-禁用 1-正常
  status: null,
  //创建时间
  createTime: null,
  //更新时间
  updateTime: null,
});

//基本信息数据
const basicInfoData = computed(() => {
  return [
    {
      label: "镇街名称",
      value: townAccountInfo.townName || "-",
    },
    {
      label: "镇街联系人",
      value: townAccountInfo.townPerson || "-",
    },
    {
      label: "镇街联系方式",
      value: townAccountInfo.townMobile || "-",
    },
    {
      label: "镇街代码",
      value: townAccountInfo.townCode || "-",
    },
    {
      label: "镇街地址",
      value: townAccountInfo.townAddress || "-",
    },
    {
      label: "账号状态",
      value: getStatusText(townAccountInfo.status),
    },
    {
      label: "创建时间",
      value: townAccountInfo.createTime ? proxy.$formatDate(townAccountInfo.createTime) : "-",
    },
    {
      label: "更新时间",
      value: townAccountInfo.updateTime ? proxy.$formatDate(townAccountInfo.updateTime) : "-",
    },
  ];
});

//操作记录数据
const operationData = ref(mockOperationData);

//操作记录表格列
const operationColumns = [
  {
    title: "操作类型",
    dataIndex: "operationType",
    slotName: "operationType",
    width: 100,
  },
  {
    title: "操作用户",
    dataIndex: "operationUser",
    width: 120,
  },
  {
    title: "操作时间",
    dataIndex: "operationTime",
    slotName: "operationTime",
    width: 160,
  },
  {
    title: "操作描述",
    dataIndex: "operationDesc",
  },
  {
    title: "操作IP",
    dataIndex: "operationIp",
    width: 120,
  },
];

//获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "禁用",
    1: "正常",
  };
  return statusMap[status] || "-";
};

//获取操作类型文本
const getOperationTypeText = (type) => {
  const typeMap = {
    create: "创建",
    update: "修改",
    delete: "删除",
    login: "登录",
    logout: "登出",
    enable: "启用",
    disable: "禁用",
  };
  return typeMap[type] || type;
};

//获取操作类型颜色
const getOperationTypeColor = (type) => {
  const colorMap = {
    create: "green",
    update: "blue",
    delete: "red",
    login: "cyan",
    logout: "gray",
    enable: "green",
    disable: "orange",
  };
  return colorMap[type] || "gray";
};

//下载文件
const onDownLoad = (fileId) => {
  if (!fileId) {
    proxy.$msg.warning("文件不存在");
    return;
  }

  spinLoading.value = true;
  // 模拟下载
  setTimeout(() => {
    proxy.$msg.success("文件下载成功");
    spinLoading.value = false;
  }, 1000);
};

//编辑按钮 -> 点击事件
const editBtnClick = () => {
  emits("edit", townAccountInfo.townAccountId);
};

//禁用按钮 -> 点击事件
const disableBtnClick = () => {
  proxy.$modal.confirm({
    title: "确认禁用",
    content: "确定要禁用该镇街账号吗？",
    onOk: () => {
      spinLoading.value = true;
      // 模拟API调用
      setTimeout(() => {
        townAccountInfo.status = 0;
        proxy.$msg.success("禁用成功");
        spinLoading.value = false;
        emits("ok");
      }, 1000);
    },
  });
};

//启用按钮 -> 点击事件
const enableBtnClick = () => {
  proxy.$modal.confirm({
    title: "确认启用",
    content: "确定要启用该镇街账号吗？",
    onOk: () => {
      spinLoading.value = true;
      // 模拟API调用
      setTimeout(() => {
        townAccountInfo.status = 1;
        proxy.$msg.success("启用成功");
        spinLoading.value = false;
        emits("ok");
      }, 1000);
    },
  });
};

//关闭按钮 -> 点击事件
const cancelBtnClick = () => {
  emits("cancel");
};

//加载镇街账号详细信息
const loadTownAccountInfo = (townAccountId) => {
  spinLoading.value = true;
  
  // 模拟API调用
  setTimeout(() => {
    const data = mockTownData[townAccountId];
    if (data) {
      //数据赋值
      for (let key in data) {
        if (townAccountInfo.hasOwnProperty(key)) {
          townAccountInfo[key] = data[key];
        }
      }
    }
    spinLoading.value = false;
  }, 500);
};

//监听参数变化
watch(
    () => props.params,
    (newVal, oldVal) => {
      //镇街账号ID
      if (props.params.townAccountId) {
        //加载镇街账号详情
        loadTownAccountInfo(props.params.townAccountId);
      }
    },
    {deep: true, immediate: true}
);
</script>

<style scoped>
/* 图片容器样式 */
.image-container {
  @apply h-40 flex justify-center items-center;
}

/* 空图片占位符 */
.empty-image-placeholder {
  @apply w-full h-40 flex flex-col justify-center items-center border border-dashed border-[var(--color-border-2)] rounded bg-[var(--color-fill-1)];
}

/* 统一图片容器高度 */
:deep(.arco-image) {
  @apply h-40 overflow-hidden;
}

:deep(.arco-image-img) {
  @apply object-contain h-4/5;
}

/* 卡片样式调整 */
:deep(.arco-card-body) {
  @apply p-2;
}

:deep(.arco-card-header) {
  @apply pb-2;
}

/* 按钮样式优化 */
:deep(.arco-btn) {
  @apply transition-all duration-300;
}

:deep(.arco-btn-text) {
  @apply hover:bg-[var(--color-fill-2)] rounded-full w-8 h-8 flex items-center justify-center p-0 mx-1;
}

/* 卡片标题样式 */
:deep(.arco-card-header-title) {
  @apply text-[var(--color-text-1)] font-medium;
}

/* 描述列表样式优化 */
:deep(.arco-descriptions-item-label) {
  @apply font-medium text-[var(--color-text-2)];
}

:deep(.arco-descriptions-item-value) {
  @apply text-[var(--color-text-1)];
}

/* 表格样式优化 */
:deep(.arco-table-th) {
  @apply bg-[var(--color-fill-1)];
}

/* 标题图标样式 */
.text-lg .arco-icon {
  @apply text-[var(--color-primary)];
}
</style>